<template>
  <div class="con">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登陆</span>
      </div>
      <el-form :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input type="password" v-model="form.checkPassword"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register('form')">注册</el-button>
          <el-button @click="toLogin">登陆</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { httpIp } from "../js/http";
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: "",
        email: "",
        password: "",
        checkPassword: "",
        nickname:""
      },
      rules: {
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPassword: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    toLogin() {
      this.$router.push({
        name: "login"
      });
    },
    register(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$ajax
            .post("/api/addUserInfo/", {
              user_name: this.form.name,
              user_psd: this.form.password,
              user_mail: this.form.email,
              user_nickname:this.form.nickname
            })
            .then(res => {
              if (res.status == 1) {
                this.$message(
                  {
                    message: res.message,
                    type: "success"
                  },
                  1000
                );
                setTimeout(() => {
                  this.$router.push({
                    name: "login"
                  });
                }, 1000);
              } else {
                this.$message(
                  {
                    message: res.message,
                    type: "error"
                  },
                  1000
                );
              }
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.box-card {
  width: 600px;
  margin: 150px auto 0;
}
</style>